<template>
	<view class="">
		<!-- <view class="list">
			<view class="list__left">药剂：</view>
			<view class="list__right">
				<input type="text" placeholder="请选择" disabled :value="drugCar" />
			</view>
		</view> -->
		<view class="list">
			<view class="list__left">供应商：</view>
			<view class="list__right">
				<input type="text" :value="destination" placeholder="请选择" disabled @click="destinationPickerVisible = true,getWuNiDestination()" />
			</view>
		</view>
		<view class="box">
			<view class="list">
				<view class="list__left">皮重：</view>
				<view class="list__right" style="display: flex;">
					<input style="width: 200rpx;" type="number" v-model="pinum" />
					<text>kg</text>
				</view>
			</view>
			<view class="list">
				<view class="list__left">皮重称重日期：</view>
				<view class="list__right">
					<input style="width: 340rpx;" type="text" disabled :value="pidate" @click="piDatePickerVisible = true" />
				</view>
			</view>
			<view class="img">
				<view class="img-item" v-for="(item,index) in piImgages" :key="item.img">
					<view class="delete-box" @click="deletePiImg(index)">
						<image src="@/static/theme/default/home/del.png" mode=""></image>
					</view>
					<image :src="item.img" mode=""  @click="previewImg(index,piImgages)"></image>
				</view>
				<view class="clear"></view>
			</view>
			<view class="photo-box" @click="updatePi">
				<image class="photo" src="@/static/theme/default/home/photo.png" mode=""></image>
			</view>
		</view>
		<view class="box">
			<view class="list">
				<view class="list__left">毛重：</view>
				<view class="list__right" style="display: flex;">
					<input style="width: 200rpx;" type="number" v-model="maonum" />
					<text>kg</text>
				</view>
			</view>
			<view class="list">
				<view class="list__left">毛重称重日期：</view>
				<view class="list__right">
					<input style="width: 340rpx;" type="text" disabled :value="maodate" @click="maoDatePickerVisible = true" />
				</view>
			</view>
			<view class="img">
				<view class="img-item" v-for="(item,index) in maoImgages" :key="item.img">
					<view class="delete-box" @click="deleteMaoImg(index)">
						<image src="@/static/theme/default/home/del.png" mode=""></image>
					</view>
					<image :src="item.img" mode="" @click="previewImg(index,maoImgages)"></image>
				</view>
				<view class="clear"></view>
			</view>
			<view class="photo-box" @click="updateMao">
				<image class="photo" src="@/static/theme/default/home/photo.png" mode=""></image>
			</view>
		</view>
		<view class="btn">
			<u-button text="确认" color="#2979ff" @click="confirm"></u-button>
		</view>
		
		<u-popup :show="destinationPickerVisible" @close="destinationPickerVisible = false" @open="destinationPickerVisible = true">
			<view class="pop">
				<view class="pop__item" hover-class="clickable" v-for="item in destinations" :key="item.aname" @click="selectDestination(item)">{{item.aname}}</view>
			</view>
		</u-popup>
		
		<u-datetime-picker
				:show="piDatePickerVisible"
				v-model="piDefaultDate"
				mode="datetime"
				@confirm="confirmPiDate"
				@cancel="piDatePickerVisible = false"
		></u-datetime-picker>
		<u-datetime-picker
				:show="maoDatePickerVisible"
				v-model="maoDefaultDate"
				mode="datetime"
				@confirm="confirmMaoDate"
				@cancel="maoDatePickerVisible = false"
		></u-datetime-picker>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import moment from 'moment'
	import {uploadImages} from '@/common/custom_util.js'
	
	export default {
		data() {
			return {
				obscode: _data.localData('obscode'),
				drugCar: '',
				drug: '',
				destination: '',
				destinations: [],
				destinationPickerVisible: false,
				date: moment().format('YYYY-MM-DD'),
				pinum: 0,
				maonum: 0,
				pidate: moment().format('YYYY-MM-DD HH:mm') + ':00',
				maodate: moment().format('YYYY-MM-DD HH:mm') + ':00',
				piImgages: [],//皮重照片
				maoImgages: [],//毛重照片
				piDatePickerVisible: false,
				piDefaultDate: Number(new Date()),
				maoDefaultDate: Number(new Date()),
				maoDatePickerVisible: false,
				type: '1',
				range: [{"value": '1',"text": "皮重"},{"value": '2',"text": "毛重"}],
			}
		},
		onLoad() {
			this.getDrugCar()
		},
		methods: {
			getDrugCar() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getDrugCar',
					code: 1,
					success(res) {
						if(!res.length) return;
						that.drugCar = res[0].myid + '（' + res[0].pname + '）'
						that.drug = res[0];
					}
				})
			},
			/**
			 * 获取目的地
			 */
			getWuNiDestination() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getDrugSupplierList',
					success(res) {
						that.destinations = res;
					}
				})
			},
			/**
			 * 选择目的地
			 * @param {Object} v
			 */
			selectDestination(v) {
				this.destination = v.aname;
				this.destinationPickerVisible = false;
			},
			/**
			 * 上传皮重照片
			 */
			updatePi() {
				let that = this;
				uploadImages({},res => {
					uni.hideLoading()
					that.piImgages.push(...res);
				})
			},
			/**
			 * 上传毛重照片
			 */
			updateMao() {
				let that = this;
				uploadImages({},res => {
					uni.hideLoading()
					that.maoImgages.push(...res);
				})
			},
			/**
			 * 删除毛照片
			 * @param {Object} i
			 */
			deleteMaoImg(i) {
				this.maoImgages.splice(i,1);
			},
			/**
			 * 删除皮照片
			 * @param {Object} i
			 */
			deletePiImg(i) {
				this.piImgages.splice(i,1);
			},
			/**
			 * 预览照片
			 * @param {Object} i
			 */
			previewImg(i,v) {
				let temp = [];
				v.forEach(item => {
					temp.push(item.img)
				})
				uni.previewImage({
					current: i,
					urls: temp
				})
			},
			getRandom() {
				return Math.floor(Math.random()*50) + 10;
			},
			/**
			 * 确认皮重日期
			 */
			confirmPiDate(e) {
				this.piDatePickerVisible = false;
				this.pidate = moment(e.value).format('YYYY-MM-DD HH:mm') + ':00';
			},
			/**
			 * 确认毛重日期
			 */
			confirmMaoDate(e) {
				this.maoDatePickerVisible = false;
				this.maodate = moment(e.value).format('YYYY-MM-DD HH:mm') + ':00';
			},
			/**
			 * 添加图片
			 */
			async addWuNiWeightImages(apiparam) {
				let that = this;
				_custom.getDataJava({
					apiname: 'addWuNiWeightImages',
					code: 13,
					apiparam: apiparam,
					success(res) {
						return
					}
				})
			},
			/**
			 * 上传数据
			 */
			addDrugHistoryData(pitimestamp,maotimestamp) {
				let that = this;
				_custom.getDataJava({
					apiname: 'addDrugHistoryData',
					code: 3,
					apiparam: {
						carnum: this.drug.myid,
						pinum: this.pinum*1,
						maonum: this.maonum*1,
						pidate: this.pidate,
						maodate: this.maodate,
						destination: this.destination,
						pitimestamp: pitimestamp,
						maotimestamp: maotimestamp,
					},
					success(res) {
						uni.showToast({
							title: '添加成功!',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						},400)
					},
					fail() {
						uni.showToast({
							title: '添加失败',
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 点击确认按钮
			 */
			confirm() {
				let that = this;
				if(!this.destination) {
					uni.showToast({
						title: '请选择目的地',
						icon: 'none'
					})
					return
				}
				if(this.pinum == 0 || this.maonum == 0) {
					uni.showToast({
						title: '皮重或毛重不能为0',
						icon: 'none'
					})
					return
				}
				if(this.pinum*1 >= this.maonum*1) {
					uni.showToast({
						title: '皮重不能大于等于毛重',
						icon: 'none'
					})
					return
				}
				if(this.pidate == this.maodate) {
					uni.showToast({
						title: '皮重时间不能等于毛重时间',
						icon: 'none'
					})
					return
				}
				if(!this.piImgages.length) {
					uni.showToast({
						title: '至少上传一张皮重照片',
						icon: 'none'
					})
					return
				}
				if(!this.maoImgages.length) {
					uni.showToast({
						title: '至少上传一张毛重照片',
						icon: 'none'
					})
					return
				}
				uni.showModal({
					title: '确认上传？',
					success(res) {
						if(res.confirm) {
							let pi = [];
							let mao = [];
							let pitimestamp = moment(that.pidate).valueOf();//毫秒数，unix():秒数
							let maotimestamp = moment(that.maodate).valueOf();
							if(that.piImgages.length) {
								that.piImgages.forEach((item,index) => {
									pi.push({
										imgindex: index,
										imgpath: item.path,
										imgtimestamp: pitimestamp
									})
								})
							}
							if(that.maoImgages.length) {
								that.maoImgages.forEach((item,index) => {
									mao.push({
										imgindex: index,
										imgpath: item.path,
										imgtimestamp: maotimestamp
									})
								})
							}
							that.addWuNiWeightImages(pi).then(() => {
								return that.addWuNiWeightImages(mao)
							}).then(() => {
								that.addDrugHistoryData(pitimestamp,maotimestamp)
							})
						}
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.list {
		height: 100rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		
		&__right {
			flex: 1;
			
			input {
				text-align: center;
				border-bottom: 1rpx solid #eee;
			}
		}
	}
	
	.box {
		padding: 20rpx;
		position: relative;
	}
	
	.photo-box {
		position: absolute;
		right: 40rpx;
		top: 40rpx;
		width: 60rpx;
		height: 60rpx;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.pop {
		background-color: #fff;
		max-height: 550rpx;
		overflow: scroll;
		
		&__item {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}
	}
	
	.img {
		background-color: #fff;
		width: 100%;
		padding-left: 20rpx;
		padding-bottom: 20rpx;
		
		&-item {
			width: 130rpx;
			height: 130rpx;
			margin-right: 40rpx;
			margin-top: 20rpx;
			float: left;
			position: relative;
			
			image {
				width: 100%;
				height: 100%;
				border-radius: 20rpx;
			}
		}
	}
	
	.clear {
		clear: both;
	}
	
	.delete-box {
		position: absolute;
		right: -20rpx;
		top: -20rpx;
		width: 50rpx;
		height: 50rpx;
		z-index: 9;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		z-index: 9;
	}
</style>
